<style nonce="{nonce}">



  h1,h2,h3,table {margin-left:5%;margin-right:5%;}
  td,th,h1,h2,h3 {color: black;}
  h1,h2 {font-weight:bold;}
  tr:hover {background-color: #ddd;}
  td, th {
      border: 1px solid grey
  }
  p {color:black;}
  p {margin:5%;}
  th { background-color: #ffd78c;}
  tr:nth-child(even){background-color: #f2f2f2;}

  html,
  body {
      height: 100%;
      overflow: hidden;
      overflow-y:auto;
  }

  body {
      background: white;
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0;
  }

  .toolbar {
      overflow: visible;
      width: 100%;
      top: 0;
      position: absolute;
      background: gray;
      box-shadow: black 0 0 1em;
      color: black;
      display: flex;
      font: 12px "Segoe UI", sans-serif;
      padding: 0.25em;
      white-space: nowrap;
      z-index: 2;
  }

  .config {
      background: rgba(255, 255, 255, 1);
      top:40px;
      padding-top: 10%;
      overflow: visible;
      width: 100%;
      position: fixed;
      color: black;
      font: 12px "Segoe UI", sans-serif;
      padding: 0.25em;
      white-space: nowrap;
      z-index: 4;
  }

  .left-panel,
  .center-panel,
  .right-panel {
      align-items: center;
      display: flex;
      flex: 1;
  }

  .center-panel {
      justify-content: center;
  }

  .right-panel {
      justify-content: flex-end;
  }

  .button {
      background: dimgray;
      border: none;
      box-sizing: border-box;
      color: whitesmoke;
      cursor: default;
      font: inherit;
      margin: 0.25em;
      outline: none !important;
      padding: 0.5em;
      text-align: center;
      text-decoration: none !important;
      transition: background ease-out 125ms, color ease-out 125ms;
      user-select: none;
      width: 10em;
  }

  .config {
    padding: 0.5em;
  }

  .button:hover {
      background: darkgray;
      box-shadow: inset rgba(255, 255, 255, 0.25) 0 0 1em;
      color: black;
  }

  .fancy-checkbox>input:checked+div,
  .button:active {
      background: silver;
      box-shadow: inset rgba(0, 0, 0, 0.25) 0 0 1em;
      color: black;
  }

  .fancy-checkbox>input {
      display: none;
  }

  .separator {
      width: 1em;
  }

  #zoom {
      color: white;
      margin: 0.5em;
  }

  #workspace {
      cursor: crosshair;
      flex: 1;
      overflow: hidden;
      position: relative;
      user-select: none;
  }

  #workspace:focus {
      outline: none;
  }

  #image {
      box-shadow: rgba(0, 0, 0, 0.6) 0 0 3em;
      max-height: none;
      max-width: none;
      position: absolute;
  }

  #status {
      align-items: center;
      background: rgba(0, 0, 0, 0.85);
      color: white;
      display: flex;
      font: 16px Monaco, Menlo, Consolas, monospace;
      height: 100%;
      justify-content: center;
      margin: 0;
      position: absolute;
      width: 100%;
      z-index: 1;
  }
  

  #status:empty {
      display: none;
  }
</style>

<div>
<div class="toolbar">
    <div class="center-panel">
        <label class="fancy-checkbox">
            <input id="export-as-markdown" name="zoom-mode" type="radio" value="fixed" />
            <div class="button">Export markdown</div>
        </label>
        <label class="fancy-checkbox">
            <input id="export-as-pdf" name="zoom-mode" type="radio" value="fit"/>
            <div class="button">Export PDF</div>
        </label>
        <label class="fancy-checkbox">
            <input id="export-as-html" name="zoom-mode" type="radio" value="fit" />
            <div class="button">Export HTML</div>
        </label>
        <label class="fancy-checkbox">
            <input id="export-as-image" name="zoom-mode" type="radio" value="fit" />
            <div class="button">Export SVG diagrams</div>
        </label>
        <!-- <label id="fancy-checkbox">Include state machines</label>
        <input id="enable-state-machines" type="checkbox"> -->
<!--        <label class="fancy-checkbox">
            <input id="export-as-latex" name="zoom-mode" type="radio" value="fit" />
            <div class="button">Export LaTeX</div>
        </label>-->
    </div>
</div>

<div class="config">

    <label style="margin-left:2%;" >Include FSMs</label>
    <input style="margin-right:2%;" id="enable-state-machines" type="checkbox">

    <label>Signals</label>
    <select id="signals" style="margin-right:2%;" name="select">
        <option value="all" selected>All</option>
        <option value="commented">Only commented</option>
        <option value="none">None</option>
    </select>

    <label>Constants/types</label>
    <select id="constants" style="margin-right:2%;" name="select">
        <option value="all" selected>All</option>
        <option value="commented">Only commented</option>
        <option value="none">None</option>
    </select>

    <label>Always/process</label>
    <select id="process" style="margin-right:2%;" name="select">
        <option value="all" selected>All</option>
        <option value="commented">Only commented</option>
        <option value="none">None</option>
    </select>

</div>

<script>
    const vscode = acquireVsCodeApi();
    document.getElementById("export-as-markdown").onclick = function() {export_message("markdown")};
    document.getElementById("export-as-pdf").onclick = function() {export_message("pdf")};
    document.getElementById("export-as-html").onclick = function() {export_message("html")};
    document.getElementById("export-as-image").onclick = function() {export_message("image")};

    let fsm = document.getElementById("enable-state-machines");
    fsm.onclick = function() {
        send_config();
    };

    let constants = document.getElementById("constants");
    constants.onclick = function(e) {
        send_config();
    };

    let signals = document.getElementById("signals");
    signals.onclick = function(e) {
        send_config();
    };

    let process = document.getElementById("process");
    process.onclick = function(e) {
        send_config();
    };

    function export_message(message) {
        vscode.postMessage({
            command: 'export',
            text: message
        })
    }
    function send_config() {
        let config = get_config();
        vscode.postMessage({
            command: 'set_config',
            config: config
        })
    }

    // Handle the message inside the webview
    window.addEventListener('message', event => {
        const message = event.data; // The JSON data our extension sen
        switch (message.command) {
            case 'set_config':
                let config = message.config;
                set_config(config);
        }
    });

    function get_config(){
        let config = {
            'fsm' :        fsm.checked,
            'signals' :    signals.value,
            'constants' :  constants.value,
            'process' :    process.value,
        }
        return config;
    }

    function set_config(config){
        if (config !== undefined){
            fsm.checked = config.fsm;
            signals.value = config.signals;
            constants.value = config.constants;
            process.value = config.process;
        }
    }

</script>
